<template>
  <el-affix :offset="0">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      :router="true"
      background-color="#fff"
      text-color="#202020"
      active-text-color="#ff7900"
    >
      <el-menu-item index="0">
        <img style="width: 100px" src="@/assets/img/logo_white.png" alt=" " />
      </el-menu-item>
      <el-menu-item index="1" :route="{ name: 'home' }">首页</el-menu-item>
      <el-sub-menu index="2">
        <template #title>安全技术服务</template>
        <el-menu-item index="2-1" :route="{ name: 'test' }"
          >渗透测试</el-menu-item
        >
        <el-menu-item index="2-2" :route="{ name: 'scanning' }"
          >漏洞扫描</el-menu-item
        >
        <el-menu-item index="2-3" :route="{ name: 'response' }"
          >应急响应</el-menu-item
        >
        <el-menu-item index="2-4" :route="{ name: 'exercise' }"
          >红蓝对抗</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>人才培养与教育培训</template>
        <el-menu-item index="3-1" :route="{ name: 'training' }"
          >安全服务就业培训</el-menu-item
        >
        <el-menu-item index="3-2" :route="{ name: 'HWCamp' }"
          >HW集训营</el-menu-item
        >
        <el-menu-item index="3-3" :route="{ name: 'redTeam' }"
          >红队班</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>安全认证</template>
        <el-menu-item index="4-1" :route="{ name: 'cisp' }">CISP</el-menu-item>

        <el-menu-item index="4-2" :route="{ name: 'nisp' }">NISP</el-menu-item>
        <el-menu-item index="4-3" :route="{ name: 'cisp-pte' }"
          >CISP-PTE</el-menu-item
        >
        <el-menu-item index="4-3" :route="{ name: 'SCSA-S' }"
          >深信服SCSA-S系列认证</el-menu-item
        >
      </el-sub-menu>
      <!-- <el-menu-item index="5" :route="{ name: 'productService' }"
        >产品服务</el-menu-item
      > -->
      <el-menu-item index="6" :route="{ name: 'aboutUS' }"
        >关于我们</el-menu-item
      >
    </el-menu>
  </el-affix>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const phone = import.meta.env.VITE_APP_PHONE;
const email = import.meta.env.VITE_APP_EMAIL;
const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.el-menu-item {
  font-weight: bold;
}
.el-menu-demo {
  padding: 0px 30px;
  font-weight: bold;
}
.el-menu-item:hover {
  background-color: transparent !important;
  color: #ff7900 !important;
}
</style>
